<template>
<div class="box">
    <div>
        <el-form :inline="true" :model="searchForm" class="demo-form-inline">
            <el-form-item label="关键字">
                <el-input v-model="searchForm.keyWord" placeholder="关键字" clearable />
            </el-form-item>
            <el-form-item label="选择品牌">
                <el-select
                    v-model="searchForm.brandId"
                    placeholder="请选择品牌"
                    style="width: 240px"
                >
                    <el-option v-for="item in brandList" :label="item.brandName" :value="item.brandId" :key="item.brandId" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSearch">搜索</el-button>
                <el-button type="primary" @click="onMakeOrder">下订单</el-button>
            </el-form-item>
        </el-form>
    </div>
    <div>
        <el-table :data="tableData" stripe style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="prodId" label="产品ID" width="180" />
            <el-table-column prop="prodName" label="产品名称" width="180" />
            <el-table-column prop="prodPrice" label="产品价格" width="180" />
            <el-table-column prop="prodCount" label="产品库存" width="180" />
            <el-table-column label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
                    编辑
                    </el-button>
                    <el-button
                    size="small"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)"
                    >
                    删除
                    </el-button>
                    <el-button
                    size="small"
                    type="primary"
                    :disabled="scope.row.prodCount<=0"
                    @click="handleAddCar(scope.$index, scope.row)"
                    >
                    添加到购物车
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <div style="margin-top: 20px;">
        <el-pagination
            v-model:current-page="searchForm.pageNum"
            v-model:page-size="searchForm.pageSize"
            :page-sizes="[100, 200, 300, 400]"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            />
    </div>
</div>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { getProdList,getBrandList,addProdToCar,addOrder } from '@/api/api'
import { ElMessage } from 'element-plus';

const tableData = ref([]);
const total = ref(0);
const brandList = ref([]);
const multipleSelection = ref<any[]>([]);

const searchForm = ref({
    pageNum: 1,
    pageSize: 5,
    keyWord: '',
    brandId: null,
});

const loadList = () => {
    getProdList(searchForm.value).then(res => {
        if(res.data.code == 200) {
            tableData.value = res.data.data.records;
            total.value = res.data.data.total;
        }
    })
}

// 获取品牌列表
const loadBrandList = () => {
    getBrandList().then(res => {
        if(res.data.code == 200) {
            brandList.value = res.data.data;
        }
    })
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  searchForm.value.pageSize = val;
  loadList();
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  searchForm.value.pageNum = val;
  loadList();
}

// 搜索函数
const onSearch = () => {
    loadList();
}

const handleEdit = (index: number, row: any) => {
  console.log(index, row)
}
const handleDelete = (index: number, row: any) => {
  console.log(index, row)
}

// 添加购物车
const handleAddCar = (index: number, row: any) => {
    console.log('添加购物车', row);
    addProdToCar(row).then(res => {
        if(res.data.code == 200) {
            ElMessage.success('添加购物车成功');
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })
}

// 多选商品
const handleSelectionChange = (val: any[]) => {
  multipleSelection.value = val
  console.log('多选商品',multipleSelection.value );
  
}

// 下订单
const onMakeOrder = () => {
    console.log('下订单',multipleSelection.value );
    addOrder(multipleSelection.value).then(res => {
        if(res.data.code == 200) {
            ElMessage.success('下单成功，请尽快支付');
            // 刷新列表
            loadList();
        }
        else {
            ElMessage.error(res.data.msg);
        }
    })
}

// 页面加载钩子函数
onMounted(() => {
    loadBrandList();
    loadList();
});

</script>

<style scoped>

</style>